<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >

      <div class="top">
        <el-form :inline="true" style="margin-top: 10px">
          <el-form-item>
            <el-date-picker
              v-model="timerange"
              type="datetimerange"
              value-format="timestamp"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getList"
            />
          </el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form>

      </div>
      <div v-loading="listLoading">
        <el-row>
          <el-row :gutter="40" style="background:#fff;padding:16px 16px 0;margin-bottom:1px;">
            <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col">
              <div class="card-panel">
                总销售额:${{ total_sales }} 订单总数:{{ total_orders }} 日均销售:${{ daily_sales }} 均单价:${{ order_sales }}
              </div>
            </el-col>
          </el-row>
        </el-row>
        <el-row :loading="listLoading" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
          <line-chart :chart-data="lineChartData" />
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { OrdersGetStatics } from '@/api/orders/ordersapi'
import { Get as GetWebsite } from '@/api/erp/elicink/website'
import LineChart from './LineChart'

import qs from 'qs'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Orderstatics',
  components: {
    LineChart
  },
  props: ['orderStaticVisible', 'website_id'],
  data() {
    return {
      title: '订单销售情况',
      total_sales: 0,
      total_orders: 0,
      order_sales: 0,
      daily_sales: 0,
      dialogVisible: false,
      listLoading: false,
      lineChartData: {},
      timerange: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime())
            start.setHours(0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            start.setHours(0, 0, 0)
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近6个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近1年',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
            start.setHours(0, 0, 0)
            end.setHours(23, 59, 59)
            picker.$emit('pick', [start, end])
          }
        }
        ]
      }
    }
  },
  watch: {
    orderStaticVisible(v) {
      this.dialogVisible = v
      if (v) {
        this.getList()
      }
    }
  },
  methods: {
    handleGetWebsite() {
      GetWebsite().then(response => {
        this.websites = response.data.data
      })
    },
    getList() {
      this.listLoading = true
      OrdersGetStatics(this.website_id, qs.stringify({
        website_id: this.select_web,
        start: this.timerange ? this.timerange[0] : '',
        end: this.timerange ? this.timerange[1] : ''
      }))
        .then(response => {
          this.scrollTop()
          this.lineChartData = response.data.data
          this.total_sales = response.data.total_sales
          this.daily_sales = response.data.daily_sales
          this.total_orders = response.data.total_orders
          this.order_sales = response.data.order_sales
          this.title = response.data.title
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },

    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeMyDialog', false)
    }
  }
}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
